import React, { Component } from 'react';
import { NavBar, ErrorBlock, Empty } from 'antd-mobile'
import "../../styles/cart/cart.scss"
import List from '../../components/cart/List';
import Bottom from '../../components/cart/Bottom';

import { ShopcartList, ShopcartClear, ShopcartSub } from '../../api/cart';


class Cart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            ShopcartList: []
        }
    }

    getShopcartList() {
        ShopcartList({ userid: localStorage.getItem("userid") }).then((res) => {
            console.log(res);
            this.setState({ ShopcartList: res.data.list })
        })
    }

    componentDidMount() {
        if (localStorage.getItem("token")) {
            this.getShopcartList()
        }
    }

    back() {
        this.props.history.goBack()
    }
    clear() {
        ShopcartClear({ userid: localStorage.getItem("userid") }).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
                this.getShopcartList()
            }
        })
    }

    del(id) {
        console.log(id);
        ShopcartSub({ userid: localStorage.getItem("userid"), goodid: id }).then(
            (res) => {
                console.log(res);
                if (res.data.code === 200) {
                    this.getShopcartList()
                }
            })

    }

    render() {
        return (

            <div className='crat'>
                <NavBar onBack={() => { this.back() }}>
                    购物车
                </NavBar>
                {
                    localStorage.getItem("token") ?
                        <>
                            {
                                this.state.ShopcartList.length ?
                                    <>
                                        <div className='crat-header'>
                                            <span>cdf会员购</span>
                                            <span onClick={() => { this.clear() }}>清空购物车</span>
                                        </div>
                                        <List shoplist={this.state.ShopcartList} del={this.del.bind(this)}></List>
                                        <Bottom shoplist={this.state.ShopcartList}></Bottom>
                                        <div className='footer'></div>
                                    </>
                                    :
                                    <Empty
                                        style={{ padding: '64px 0' }}
                                        imageStyle={{ width: 128 }}
                                        description='暂无数据'
                                    />
                            }
                        </>
                        :
                        <>
                            <ErrorBlock status='empty' description={"请登录后查看购物车"} />
                        </>
                }

            </div >
        );
    }
}

export default Cart;